<template>
  <a-row align="middle" style="height: 100%; width: 100%">
    <!-- 左侧空白区域 -->
    <a-col :xs="0" :sm="6"></a-col>

    <!-- 输入框，居中显示 -->
    <a-col :xs="18" :sm="12" style="text-align: center">
      <a-input-search
        v-model:value="value"
        placeholder="input search text"
        enter-button
        @search="onSearch"
        style="width: 100%; max-width: 400px; align-items: center; display: flex"
      />
    </a-col>

    <!-- 右侧头像和主题切换 -->
    <a-col :xs="6" :sm="6" style="text-align: right; padding-right: 16px">
      <a-space>
        <a-dropdown placement="bottomRight" :arrow="{ pointAtCenter: true }">
          <a-badge :count="1">
            <a-avatar shape="square">
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </a-badge>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a-button type="link" href="/user">个人信息</a-button>
              </a-menu-item>
              <a-menu-item>
                <a-button type="link" @click="logout">退出登录</a-button>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const value = ref('')
const onSearch = (value: string) => {
  console.log(value)
}

const logout = () => {
  userStore.clearUserInfo()
}
</script>
